﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
		<title>后台管理系统</title>
        <script src="${ctxPath}/static/vue.min.js"></script>
		<script src="${ctxPath}/static/axios.min.js"></script>
		<script src="${ctxPath}/static/jquery.min.js"></script>
		<script src="${ctxPath}/static/bootstrap.min.js"></script>
		<script src="${ctxPath}/static/bootoast.js"></script>
		<script src="${ctxPath}/static/config.js"></script>
		<link href="${ctxPath}/static/bootstrap.min.css" rel="stylesheet">
		<link href="${ctxPath}/static/css/bootstrap.css" rel="stylesheet" />
		<link href="${ctxPath}/static/css/common.css" rel="stylesheet"/>
    </head>
	<style>
		#main-nav {
			float:left; margin:100px 0 0 20px;border:0;position:fixed;
		}
		#main-nav li a{
			font-size:20px;
		}
		.textarea{
			border-radius:5px;font-size:20px;height:70px;width:90%;border:1px;border:1px solid #ccc;
		}
		#app{
			margin:20px 0 0 30px;
		}
		.empty {
			background:#e8bacf;
		}
		/*图片上传动画*/
		#circle{
			width: 100px;
			height: 100px;
			border: 5px white solid;
			border-left-color: #ff5500;
			border-right-color:#0c80fe;
			border-radius: 100%;
			animation: loading1 1s infinite linear;
		}
		\@keyframes loading1{
			from{transform: rotate(0deg)}to{transform: rotate(360deg)}
		}
	</style>
	<body>
	<div id="app">
		<div class="remind_title2">
			产品新增
			<div class="product-new-button" style="margin-right: 50px;"><label class="btn btn-info" v-on:click="backList()">返回</label></div>
		</div>
		<div style="width:45vw;display: inline-block;vertical-aling: top;margin:0 50px 0 0">
			<div class="input-group">
				<label class="input-group-addon">产品名称</label>
				<input class="form-control" v-model="req_data.productName" :class="{empty:req_data.productName==''&&is_save}">
			</div>
			<p style="height:15px">
			<div class="input-group">
				<label class="input-group-addon">借款额度(元)</label>
				<input class="form-control" placeholder="最小金额" v-model="req_data.minLoanAmount" :class="{empty:req_data.minLoanAmount==''&&is_save}" onkeyup="value=value.replace(/[^\d]/g,'')">
				<hr class="input-group-addon" style="margin:0px;height:1px;border:0px;color:#D5D5D5;"/>
				<input class="form-control" placeholder="最大金额" v-model="req_data.maxLoanAmount" :class="{empty:req_data.maxLoanAmount==''&&is_save}" onkeyup="value=value.replace(/[^\d]/g,'')">
			</div>
			<p style="height:15px">
			<div class="input-group">
				<label class="input-group-addon">借款期限(天)</label>
				<input class="form-control" placeholder="最小天数" v-model="req_data.minLoanTerm" :class="{empty:req_data.minLoanTerm==''&&is_save}" onkeyup="value=value.replace(/[^\d]/g,'')">
				<hr class="input-group-addon" style="margin:0px;height:1px;border:0px;color:#D5D5D5;"/>
				<input class="form-control" placeholder="最大天数" v-model="req_data.maxLoanTerm" :class="{empty:req_data.maxLoanTerm==''&&is_save}" onkeyup="value=value.replace(/[^\d]/g,'')">
			</div>
			<p style="height:15px">
			<div class="input-group">
				<label class="input-group-addon">借款利率</label>
				<input class="form-control" v-model="req_data.dayLoanRate" :class="{empty:req_data.dayLoanRate==''&&is_save}">
			</div>
			<p style="height:15px">
			<div class="input-group">
				<label class="input-group-addon">产品申请页h5</label>
				<input class="form-control" v-model="req_data.productH5Url" :class="{empty:req_data.productH5Url==''&&is_save}" placeholder="http://">
			</div>
			<p style="height:15px">
			<div>
				<label >申请流程</label>
			</div>
			<div v-for="item in req_data.applyFlowList">
				<div class="input-group">
					<label class="input-group-addon">{{item.itemNo}}、</label>
					<input class="form-control" v-model="item.val" :class="{empty:item.val==''&&is_save}">
				</div>
				<p style="height:15px">
			</div>
			<div style="margin:0 0 0 10vw">
				<label class="btn btn-info" v-on:click="save()" v-if="!saved">保存</label>
				<label style="margin-left:2vw"></label>
				<label class="btn btn-info" v-on:click="save()" v-if="saved" :disabled="saved">已保存</label>
				<label class="btn btn-info" v-on:click="reset()">重置</label>
			</div>
		</div>


		<div style="width:45vw;display: inline-block;vertical-align: top;">
			<div>
				<div>
					<label style="margin:0 2vw 0 0">产品LOGO</label>
				</div>
				<div>
					<label style="border:1px solid #ccc;">
						<div v-if="is_uploading" id="circle"></div>
						<img v-if="!is_uploading" :src="req_data.productIconUrl+'?imageView2/1/w/120/h/120'" style="width:120px" :class="{empty:req_data.productIconUrl==''&&is_save}">
						<input v-if="!is_uploading" style="position: absolute;opacity:0;" type='file' v-on:change="img_upload" accept="image/gif,image/jpeg,image/jpg,image/png">
					</label>
				</div>
			</div>
			<div>
				<p style="margin-top:7px">产品特色</p>
				<textarea maxlength="300" class="textarea" v-model="req_data.productSellPoint">{{req_data.productSellPoint}}</textarea>
			</div>
			<div>
				<p style="margin-top:7px">申请条件</p>
				<textarea maxlength="300" class="textarea" v-model="req_data.applyCondition" :class="{empty:req_data.applyCondition==''&&is_save}">{{req_data.applyCondition}}</textarea>
			</div>
			<div>
				<p style="margin-top:7px">审核说明</p>
				<textarea maxlength="300" class="textarea" v-model="req_data.auditDetail" :class="{empty:req_data.auditDetail==''&&is_save}">{{req_data.auditDetail}}</textarea>
			</div>
			<div>
				<p style="margin-top:7px">产品介绍</p>
				<textarea maxlength="300" class="textarea" v-model="req_data.productIntroduce" :class="{empty:req_data.productIntroduce==''&&is_save}">{{req_data.productIntroduce}}</textarea>
			</div>
		</div>
	</div>
	<!--页面部分-->


	<!--js部分-->
	<script>

        var data = {
            is_save:false,//是否点击保存按钮
            is_uploading:false,//是否上传中是否点击保存按钮
            saved:false,//已保存
            imgs: [],//图片路径
            imgData: {
                accept: 'image/gif, image/jpeg, image/png, image/jpg',
            },
            req_data:{
                "productName":"",
                "minLoanAmount":1000,
                "maxLoanAmount":10000,
                "minLoanTerm":7,
                "maxLoanTerm":14,
                "dayLoanRate":0.03,
                "productSellPoint":"放款快",
                "productH5Url":"http://",
                "productIconUrl":cash_ip+"/static/img/e_photo.jpg",
                "applyFlowList":[{
                    "itemNo": 1,
                    "val": "身份认证"
                },
                    {
                        "itemNo": 2,
                        "val": "基本信息"
                    },
                    {
                        "itemNo": 3,
                        "val": "芝麻分授权"
                    },
                    {
                        "itemNo": 4,
                        "val": "审核放款"
                    }],
                "applyCondition":"",
                "auditDetail":"",
                "productIntroduce":""

            }
        };
        new Vue({
            el:'#app',
            data:data,

            //接口url 初始化
            beforeCreate:function(){
                this.product_create_url = request_prefix+"/cash/product/create"; //产品新增
                this.upload_url = request_prefix+"/cash/upload";  //图片上传

            },
            created:function(){

            },
            methods:{
                //保存
                save:function(){
                    this.is_save=true;
                    //等待图片上传完成
                    if(this.is_uploading==true){
                        this.hint_toast('请等待图片上传完成');
                        return
                    }
                    //上传图片判断
                    if(this.req_data.productIconUrl.indexOf(cash_ip) != -1){
                        this.hint_toast('请上传产品logo图片');
                        return
                    }
                    //遍历入参是否有空
                    for(item in this.req_data){
                        if(item != "productSellPoint" && this.req_data[item]==""){
                            this.hint_toast('请填写完整信息');
                            return
                        }
                    }
                    this.saved=true ;
                    _this = this;
                    axios.post(this.product_create_url,this.req_data).then(function(res){
                        if (res.data.code==0){
                            _this.hint_toast('保存成功',color_type='success')
                            setTimeout(function () {
                                window.location.href = request_prefix+"/cash/product/listPage";
                            },1000);
                        }else{
                            _this.hint_toast(res.data.message)
                            _this.saved=false
                        }
                    }).catch(function (error) {
                        alert('保存失败');
                        _this.saved=false
                    })
                },

                //重置
                reset:function(){
                    window.location.reload()
                },

                backList:function () {
                    window.location.href = request_prefix+"/cash/product/listPage";
                },

                //吐司提示
                hint_toast:function(msg,color_type='danger'){
                    bootoast({
                        message: msg,
                        type: color_type,
                        position:'right-bottom',
                        timeout:1
                    });
                },

                //图片上传
                img_upload(event){
                    //浏览器是否支持
                    if (typeof FileReader === 'undefined') {
                        alert("抱歉，你的浏览器不支持图片上传，请使用新的浏览器操作！");
                    }
                    var reader =new FileReader();
                    const img1=event.target.files[0];
                    var size=img1.size;//文件的大小，判断图片的大小
                    if(size>1024 * 1024 * 1){
                        alert('请选择1M以内的图片！');
                        return false;
                    }
                    var fd = new FormData();
                    fd.append('picture',img1,img1.name);
                    var _this=this
                    this.is_uploading = true
                    axios.post(this.upload_url,fd,{
                        headers: {'Content-Type': 'multipart/form-data'}
                    }).then(function(res){
                        if (res.data.code==0){
                            _this.req_data.productIconUrl=res.data.data.pictureUrl;
                            console.log(_this.req_data.productIconUrl)
                        }else{
                            alert(res.data.message);
                        }
                        _this.is_uploading = false
                    }).catch(function (error) {
                        alert('上传图片出错！');
                        _this.is_uploading = false
                    })
                }

            }
        });
	</script>
	<!--js部分-->
	</body>

</html>